import base from "./base.js";
import * as jquery3  from "./jquery-3.5.1.min.js";
export default class index {
    constructor(render,data,rotate){
        //基础数据
        this.render = render;
        if(!rotate){
            //生成随机动画顺序
        }
        this.rotate = rotate;
        this.baseData = data;
        this.playList = [];
        this.rotateCss = [];
        this.rotateCss.push('');//第一个没有
        rotate.forEach(async (element,index) => {
            if(index>0){
                let thisrotate = base.rotateType[this.rotate[index]];
                //console.log('thisrotate :>> ', thisrotate);
                let css = thisrotate(this.rotate[index-1],data[index-1].length,data[index].length);
                this.rotateCss.push(css);
                //console.log('this.rotateCss :>> ', this.rotateCss);
            }
        });
    };
    //组装执行函数
    async intPage(data = this.baseData){
        //console.log('data :>> ', data);
        //绘制舞台
        $(this.render).html('');
        $(this.render).css({
            'overflow': 'hidden',
            "background-color": "#0D0C0C",
            "height": "100vh",
            //'transform':'scale(1.2)'
        })
        //一个随机颜色
        let txtclass = await base.getTextCss();
        
        //一个旧div
        const getolddiv = ()=>{
            let olddiv = $('<div class="olddiv">');
            olddiv.css({
                //'overflow': 'hidden',
                'transition': 'all .5s',
                'height':'100vh'
            });
            return olddiv;
        }
        let olddiv = getolddiv();
        this.olddivs = [olddiv];

        
        //创建一个中间部分 一直在中间，字号固定，颜色随机，
        const textMainDiv = $('<div class="txtMain">').html(data[0]);
        textMainDiv.css({'color':txtclass});
        textMainDiv.css({
            'word-break':'keep-all',       /* 不换行 */
            'white-space':'nowrap',
            'display':"inline-block",
            'font-size': '10em',
            'position': 'absolute',
            'top': '50%',
            'left': '50%',
            //'transition': 'all .5s',
            'transform': 'translate(-50%, -50%)'
        })
        $(this.render).append(textMainDiv);
        this.textMainDivHeight = textMainDiv.height();

        //循环动画
        data.forEach((item,index) => {
            //从第二个开始
            if(index>0 && index<16){
                let fun = async ()=>{
                    //console.log('this.olddivs :>> ', this.olddivs);

                    let thisolddiv = this.olddivs[index-1];
                    $(this.render).append(thisolddiv);

                    olddiv = getolddiv();
                    this.olddivs.push(olddiv);

                    thisolddiv.append(textMainDiv.clone());
                    textMainDiv.hide();

                    thisolddiv.css({
                        'transform':'rotate(0deg) translate(0px, 0px) scale(1)'
                    })
                    setTimeout(()=>{
                        thisolddiv.css(this.rotateCss[index]);
                        
                        $(this.render).append(olddiv);

                        setTimeout(()=>{
                            olddiv.append(thisolddiv);
                        },500)
                    },30)
                    //thisolddiv.css(this.rotateCss[index]);

                    txtclass = await base.getTextCss(txtclass);
                    //console.log('txtclass :>> ', txtclass);
                    setTimeout(()=>{
                        //console.log('txtclass :>> ', txtclass);
                        textMainDiv.css({'color':txtclass});
                        textMainDiv.html(item);
                        textMainDiv.show(100);

                    },400)
                }
                this.playList.push(fun);
            }
        });



        //先写出第一个和第二个

        // const textMainDiv2 = textMainDiv.clone();
        // olddiv.append(textMainDiv2);
        // console.log('this.textMainDivHeight :>> ', this.textMainDivHeight);
        // setTimeout(async ()=>{
        //     textMainDiv.hide();
        //     olddiv.css({
        //         //'transform-origin': '100% 50% 0',
        //         'transform':'scale(5) translate(54px, -34px)'
        //     })
        //     txtclass = await base.getTextCss(txtclass);
        //     setTimeout(()=>{
        //         console.log('txtclass :>> ', txtclass);
        //         textMainDiv.css({'color':txtclass});
        //         textMainDiv.html(data[1]);
        //         textMainDiv.show(100);
        //     },400)
        //  },600);
        //  let olddiv2 ;
        // setTimeout(async ()=>{
        //     olddiv2 = getolddiv();
        //     $(this.render).append(olddiv2);

        //     olddiv2.append(textMainDiv.clone());
        //     olddiv2.append(olddiv);

        //     textMainDiv.hide();
        //     olddiv2.css({
        //         'transform':'rotate(0deg)'
        //     })
        //     setTimeout(()=>{
        //         olddiv2.css({
        //             'transform':'rotate(90deg) translate(74px, -151px)'//3个字-131px4个字-151px)
        //         })
        //     },10)
        //     txtclass = await base.getTextCss(txtclass);
        //     setTimeout(()=>{
        //         console.log('txtclass :>> ', txtclass);
        //         textMainDiv.css({'color':txtclass});
        //         textMainDiv.html(data[2]);
        //         textMainDiv.show(100);
        //     },400)
        // },1400+600)

        // let olddiv3;
        // setTimeout(async ()=>{
        //     olddiv3 = getolddiv();
        //     $(this.render).append(olddiv3);

        //     olddiv3.append(textMainDiv.clone());
        //     olddiv3.append(olddiv2);

        //     textMainDiv.hide();
        //     olddiv3.css({
        //         'transform':'rotate(0deg)'
        //     })
        //     setTimeout(()=>{
        //         olddiv3.css({
        //             'transform':'scale(0.3) rotate(-90deg) translate(35px, -518px)'//5个字-428px 6个字-518)
        //         })
        //     },10)
        //     txtclass = await base.getTextCss(txtclass);
        //     setTimeout(()=>{
        //         console.log('txtclass :>> ', txtclass);
        //         textMainDiv.css({'color':txtclass});
        //         textMainDiv.html(data[3]);
        //         textMainDiv.show(100);
        //     },400)
        // },1400+1500+600)

        // let olddiv4 ;
        // setTimeout(async ()=>{
        //     olddiv4 = getolddiv();
        //     $(this.render).append(olddiv4);

        //     olddiv4.append(textMainDiv.clone());
        //     olddiv4.append(olddiv3);

        //     textMainDiv.hide();
        //     olddiv4.css({
        //         'transform':'rotate(0deg)'
        //     })
        //     setTimeout(()=>{
        //         olddiv4.css({
        //             'transform':'scale(0.5) translate(-85px, -94px)'//5个字-428px 6个字-518)
        //         })
        //     },10)
        //     txtclass = await base.getTextCss(txtclass);
        //     setTimeout(()=>{
        //         console.log('txtclass :>> ', txtclass);
        //         textMainDiv.css({'color':txtclass});
        //         textMainDiv.html(data[4]);
        //         textMainDiv.show(100);
        //     },400)
        // },1400+1500+1500+600)
        
        //this.playList = data;
        this.play();

    };
    //函数合集 执行
    play(playList = this.playList){
        //console.log('playList :>> ', playList);
        playList.forEach((item,i) => {
            setTimeout(()=>{
                //console.log('item :>> ', item);
                item();
            },(i+1)*1700)
        });
    };

}